<template>
  <div>
    <musicitem :arr="newarr">
      <div class="box">
        <h1>华语新碟榜</h1>
        <ul>
          <li v-for="(item, index) in newarr" :key="index">
            <div class="lef">
              <img :src="item.cover_url" alt="" />
              <p>{{ item.title }}</p>
              <span>评分：{{ item.score }}</span>
            </div>
          </li>
        </ul>
      </div>
    </musicitem>
     <musicitem :arr="itemarr">
      <div class="box">
        <h1>欧美新碟榜</h1>
        <ul>
          <li v-for="(item, index) in itemarr" :key="index">
            <div class="lef">
              <img :src="item.cover_url" alt="" />
              <p>{{ item.title }}</p>
              <span>评分：{{ item.score }}</span>
            </div>
          </li>
        </ul>
      </div>
    </musicitem>
     <musicitem :arr="itearr">
      <div class="box">
        <h1>日韩新碟榜</h1>
        <ul>
           <li v-for="(item, index) in itearr" :key="index">
            <div class="lef">
              <img :src="item.cover_url" alt="" />
              <p>{{ item.title }}</p>
              <span>评分：{{ item.score }}</span>
            </div>
          </li>
        </ul>
      </div>
    </musicitem>
  </div>
</template>

<script>
import musicitem from "./filmitem.vue";
export default {
  data() {
    return {
      newarr: [],
      itemarr:[],
      itearr:[],
    };
  },
  mounted() {
    this.$axios.get("../../../static/data/music.json").then((res) => {
      // console.log(res.data.group[0].group_list);
      this.newarr = res.data.group[0].group_list;
    });
     this.$axios.get("../../../static/data/music.json").then((res) => {
      //  console.log(res.data.group[1].group_list);
      this.itemarr = res.data.group[1].group_list;
    });
     this.$axios.get("../../../static/data/music.json").then((res) => {
       // console.log(res.data.group[3].group_list);
      this.itearr = res.data.group[2].group_list;
    });
  },
  components: { musicitem },
};
</script>

<style scoped>
</style>